<template>
  <div>
    <div class="detailsCon">
      <ul v-if="infos">
        <li>
          <h1>基本信息</h1>
          <div>
            <p>民族：{{minzuName}}</p>
            <p>性别：{{list.sex==1?'男':'女'}}</p>
            <p>年龄：{{list.age}}</p>
            <p>籍贯：{{list.jiGuan}}</p>
            <p>户籍性质：{{list.huJiXingZhi==1?'农业户口':'非农户口'}}</p>
            <p>学历：{{xueLiName}}</p>
            <p>专业：{{list.zhuanYe}}</p>
            <p>社保号：{{list.sheBaoHao}}</p>
            <p>原工作单位：{{list.yuanGongZuoDanWei}}</p>
            <p>宗教：{{zongJiaoName}}</p>
            <p>类别：{{list.laoRenLeiBie}}</p>
            <p>亲属：{{list.qinShu}}</p>
            <p>子女情况：{{list.ziNvQingKuang}}</p>
            <p>政治面貌：{{list.zhengZhiMianMao}}</p>
            <p>家庭情况：{{list.jiaTingChengYuanQingKuang}}</p>
          </div>
        </li>
        <!-- 完成 -->
        <li>
          <h1>紧急联系人</h1>
          <div>
            <p>姓名：{{list.jinJiLianXiRenXingMing}}</p>
            <p>联系电话：{{list.jinJiLianXiRenDianHua}}</p>
            <p>关系：{{list.jinJiLianXiRenGuanXi}}</p>
            <p>住址:{{list.jinJiLianXiRenZhuZhi}}</p>
          </div>
        </li>
        <li>
          <h1>设备信息</h1>
          <div v-for="item in list.sheBeiList">
            <!-- <p>终端类型:{{item}}</p> -->
            <p>设备名称：{{item.name}}</p>
            <p>终端编号：{{item.no}}</p>
            <!-- <p>安装时间:{{list.anZhuangShiJian}}</p> -->
          </div>
        </li>
      </ul>
      <div class="add" v-if="add">
        <h1>{{list.sheQv}} - {{list.louYv}} - {{list.danYuan}} - {{list.fangJian}}</h1>
        <div v-for="item in roomList">
          <p>姓名：{{item.name}}</p>
          <p>身份证号：{{item.cardId}}</p>
          <p>联系电话：{{item.phone}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { roomAjax, minzu ,xueli,zongjiao} from "@/api/index";
export default {
  name: "v-details",
  data() {
    return {
      infos: true,
      roomList: "",
      add: false,
      minzuName:'111',
      xueLiName:'111',
      zongJiaoName:'111',
      lists:[]
    };
  },

  // 接受父组件的值
  props: ["pValue", "list"],
  
  watch: {
    pValue() {
      if (this.pValue == 4) {
        this.add = true;
        this.infos = false;
      } else {
        this.infos = true;
        this.add = false;
      }
    }
  },
  mounted() {
  },
  methods: {
    room() {
      console.log('444444'+this.list.fangJianId)
 this.add = true;
        this.infos = false;
      // 房间信息  id从基本信息接口拿
      
      roomAjax({
        id:this.list.fangJianId,
        // id: "1248183220793573378"
      }).then(res => {
        if (res.success) {
          this.roomList = res.result;
          minzu({}).then(data => {
            if (data.success) {
              for (var i = 0; i < data.result.length; i++) {
                if (this.list.minZu == data.result[i].value) {
                  this.minzuName = data.result[i].text;
                }
              }
            }
          });
          xueli({}).then(data => {
            if (data.success) {
              for (var j = 0; j < data.result.length; j++) {
                if (this.list.xueLi == data.result[j].value) {
                  this.xueLiName = data.result[j].text;
                }
              }
            }
          });
          zongjiao({}).then(data => {
            if (data.success) {
              for (var z = 0; z < data.result.length; z++) {
                if (this.list.zongJiao == data.result[z].value) {
                  this.zongJiaoName = data.result[z].text;
                }
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style  lang="scss" scoped>
.detailsCon {
  position: absolute;
  height: 55vh;
  overflow: auto;
  top: 20%;
  z-index: 301;
  left: 53.35%;
  background: #333;
  color: #fff;
  width: 40%;
  padding: 10px;
  .add {
    h1 {
      color: #fff;
      text-align: center;
      font-size: 16px;
    }
    div {
      display: flex;
      flex-wrap: wrap;
      margin-top: 12px;
      width: 100%;
      margin-top: 20px;
      p {
        margin-left: 20px;
      }
    }
  }
  ul {
    li {
      border: 1px solid #999;
      padding: 5px;
      margin-top: 25px;
      position: relative;
      h1 {
        color: #fff;
        background: #333;
        position: absolute;
        top: -15px;
        width: 100px;
        text-align: center;
        font-weight: 800;
        font-size: 15px;
      }
      div {
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px;
        width: 100%;
        p {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>